<template>
  <div class="guide">
    <nut-overlay
      v-model:visible="state.isShow"
      :lock-scroll="state.isLock"
      :close-on-click-overlay="false"
      @click="nextStep"
    >
      <nut-image :src="getAssetsFile('home/guideStep1.png')" fit="contain" />
      <div class="nextStep" @click="nextStep"></div>
    </nut-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getAssetsFile } from "@/utils/pub-use";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  isShow: true,
  isLock: true,
});
const nextStep = () => {
  state.isShow = false;
  router.push("/add");
};
</script>

<style lang="scss" scoped>
.guide {
  //   position: relative;
  .nut-image {
    display: flex;
    justify-content: center;

    :deep(img) {
      width: 460px;
      height: 436px;
      position: fixed;
      bottom: 10px;
    }
  }
  .nextStep {
    position: absolute;
    bottom: 325px;
    right: 176px;
    width: 112px;
    height: 54px;
  }
}
</style>
